import React from 'react';
import {connect} from 'dva';
import {Table, Pagination, Popconfirm, Button} from 'antd';
import {routerRedux} from 'dva/router';
import styles from './Users.css';
import {PAGE_SIZE} from '../../constants';
import UserModal from './UserModal';

function Users({dispatch, list: dataSource, loading, pagination:pagination}) {
  function deleteHandler(id) {
    dispatch({
      type: 'users/remove',
      payload: id,
    });
  }

  function pageChangeHandler(current) {
    console.log("current",current)
    dispatch(routerRedux.push({
      pathname: '/users',
      query: {current},
    }));
  }

  function editHandler(id, values) {
    dispatch({
      type: 'users/patch',
      payload: {id, values},
    });
  }

  function createHandler(values) {
    dispatch({
      type: 'users/create',
      payload: values,
    });
  }

  const columns = [
    {
      title: 'id',
      dataIndex: 'id',
      key: 'id',
      render: text => <a href="">{text}</a>,
    },
    {
      title: '药品名称',
      dataIndex: 'medicinename',
      key: 'medicinename',
      render: text => <a href="">{text}</a>,
    },
    {
      title: '国药准字',
      dataIndex: 'approvalno',
      key: 'approvalno',
    },
    {
      title: '监管码',
      dataIndex: 'medicinecode',
      key: 'medicinecode',
    },
    {
      title: '条形码',
      dataIndex: 'barcode',
      key: 'barcode',
    },
    {
      title: '生产厂家',
      dataIndex: 'company',
      key: 'company',
    },
    /*{
     title: '成分',
     dataIndex: 'ingredient',
     key: 'ingredient',
     },*/{
      title: '储存方法',
      dataIndex: 'store',
      key: 'store',
    }, {
      title: 'keyword',
      dataIndex: 'keyword',
      key: 'keyword',
    },
    {
      title: 'Operation',
      key: 'operation',
      render: (text, record) => (
        <span className={styles.operation}>
          <UserModal record={record} onOk={editHandler.bind(null, record.id)}>
            <a>Edit</a>
          </UserModal>
          <Popconfirm title="Confirm to delete?" onConfirm={deleteHandler.bind(null, record.id)}>
            <a href="">Delete</a>
          </Popconfirm>
        </span>
      ),
    },
  ];

  return (
    <div className={styles.normal}>
      <div>
        <div className={styles.create}>
          <UserModal record={{}} onOk={createHandler}>
            <Button type="primary">Create User</Button>
          </UserModal>
        </div>
        <Table
          columns={columns}
          dataSource={dataSource}
          loading={loading}
          rowKey={record => record.id}
          pagination={false}
        />
        <Pagination
          className="ant-table-pagination"
          total={pagination.total}
          current={pagination.current}
          pageSize={pagination.pageSize}
          onChange={pageChangeHandler}
        />
      </div>
    </div>
  );
}

function mapStateToProps(state) {

  const {list, pagination} = state.users;
  console.log(pagination)
  return {
    loading: state.loading.models.users,
    list,
    pagination,
  };
}

export default connect(mapStateToProps)(Users);
